<template>
  <div class="phoneBox">
    <div class="allTitle">
      验证邮箱
    </div>
    <el-steps
      :active="active"
      finish-status="success"
      :align-center="true"
      class="steps"
    >
      <el-step title="身份验证" />
      <el-step :title="type == 'email'?'修改绑定邮箱':'修改绑定邮箱'" />
      <el-step title="完成" />
    </el-steps>
    <div v-if="active == 0">
      <div class="tips">
        已绑定的手机：{{ user.cPhone }}
      </div>
      <div class="codeInput">
        <input
          v-model="phone"
          type="tel"
          placeholder="请输入验证码"
          maxlength="6"
        >
        <div
          v-show="show"
          @click="countDown"
        >
          获取验证码
        </div>
        <div v-show="!show">
          {{ count }} s
        </div>
      </div>
    </div>
    <div v-if="active == 1">
      <div class="codeInputs">
        <input
          v-model="newEmail"
          type="email"
          placeholder="请输入邮箱"
        >
      </div>
      <div class="codeInput">
        <input
          v-model="code"
          type="tel"
          maxlength="6"
          placeholder="请输入验证码"
        >
        <div
          v-show="sShow"
          @click="getCode"
        >
          获取验证码
        </div>
        <div v-show="!sShow">
          {{ counts }} s
        </div>
      </div>
      <div v-if="active == 2">
        <img
          src="../../assets/img/success.png"
          alt=""
        >
        <div>恭喜您，验证邮箱成功</div>
      </div>
    </div>
    <div
      class="nextBtn"
      @click="next"
    >
      下一步
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      phone: "",
      show: true,
      sShow: true,
      count: "",
      timer: null,
      timers: null,
      counts: "",
      codeSendStatus: false,
      code: "",
      newEmail: "",
      user: {},
      verify_key: "",
      type:''
    };
  },
  watch: {
    active: function (val) {
      if (val == 1) {
        this.codeSendStatus = false;
      }
      console.log(this.codeSendStatus);
    },
  },
  mounted() {
    this.type = this.$route.query.type
    this.getData();
  },
  methods: {
    getData() {
      let paramse = {
        token:localStorage.getItem("token"),
        data : {}
      }
      this.$api.person.userInfo(paramse).then((res) => {
        // 执行某些操作
        console.log('11111111', res)
        if (res.code == 200) {
          this.user = res.data;
        }
      });
    },
    //下一步
    next() {
      if (this.active == 0) {
        if (this.codeSendStatus) {
          let data = {
            verify_key: this.verify_key,
            verify_code: this.phone,
          };
          this.$api.person.checkvalidcode(data).then((res) => {
            // 执行某些操作
            if (res.code == 1) {
              this.$message(res.msg);
              if (this.active++ > 2) this.active = 0;
            } else {
              this.$message.warning(res.msg);
            }
          });
        } else {
          this.$message.warning("请获取验证码");
        }
      } else if (this.active == 1) {
        if (this.codeSendStatus) {
          if (this.newEmail == "") {
            this.$message.warning("请输入邮箱");
          }
          if (this.code == "") {
            this.$message.warning("请输入验证码");
          } else {
            let data = {
              verify_key: this.verify_key,
              valid_code: this.code,
            };
            this.$api.person.checkverifcode(data).then((res) => {
              // 执行某些操作
              if (res.code == 1) {
                let reset = {
                  token:localStorage.getItem("token"),
                  daata: {
                    model: {
                      cPhone: this.phone,
                      cOpenID: this.user.cOpenID,
                      cVOpenID:this.user.cOpenID,
                      iMemberLevelId:this.user.iMemberLevelId,
                      cMemberLevelName:this.user.cMemberLevelName,
                      cMemberLevelCode:this.user.cMemberLevelCode,
                      is_corporate_member:this.user.is_corporate_member,
                      cRealName:this.user.cRealName,
                      cUserName:this.user.cUserName,
                      dReceiveTime:this.user.dReceiveTime,
                      iPoints:this.user.iPoints,
                      fConsumeAmount:this.user.fConsumeAmount,
                      cSourceDetail:this.user.cSourceDetail,
                      cStoreName:this.user.cStoreName,
                      iStoreId:this.user.iStoreId,
                      iTotalPoints:this.user.iTotalPoints,
                      dCreateTime:this.user.dCreateTime,
                      dUpdateTime:this.user.dUpdateTime,
                      cQrcodeUrl: this.user.cQrcodeUrl,
                      cBarcodeUrl:this.user.cBarcodeUrl,
                      iStop:this.user.iStop,
                      cPortrait:this.user.cPortrait,
                      ts:this.user.ts,
                      id:this.user.id,
                      elValuesNotExists:this.user.elValuesNotExists,
                      cEmail:this.newEmail
                    }
                  }
                  // verify_key: this.verify_key,
                  // valid_code: this.code,
                  // phone: this.phone,
                  // mid: this.user.id,
                };
                this.$api.person.resetEmall(reset).then((res) => {
                  // 执行某些操作
                  if (res.code == 1) {
                    this.$message(res.msg);
                  }
                });
              }
            });
            if (this.active++ > 2) this.active = 0;
          }
        } else {
          this.$message.warning("请获取验证码");
        }
      }
    },
    //验证码倒计时1
    countDown() {
      let data = {
        phone: this.user.cPhone,
      };
      this.$api.person.sendvalidcode(data).then((res) => {
        // 执行某些操作
        if (res.code == 1) {
          this.$message("发送成功!");
          this.verify_key = res.data.verify_key;
        } else {
          this.$message.warning(res.msg);
        }
      });

      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.codeSendStatus = true;
            //调验证码接口
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    //获取验证码2
    getCode() {
      if (this.newPhone == "") {
        this.$message.warning("请输入手机号");
      } else {
        var reg = /^1[3456789]\d{9}$/;
        if (reg.test(this.newPhone)) {
          let data = {
            phone: this.newPhone,
          };
          this.$api.person.requestphoneverifycode(data).then((res) => {
            // 执行某些操作
            if (res.code == 1) {
              this.$message("发送成功!");
              this.verify_key = res.data.verify_key;
            } else {
              this.$message.warning(res.msg);
            }
          });
          const TIME_COUNT = 60;
          if (!this.timer) {
            this.counts = TIME_COUNT;
            this.sShow = false;
            this.timers = setInterval(() => {
              if (this.counts > 0 && this.counts <= TIME_COUNT) {
                this.counts--;
                this.codeSendStatus = true;
                //调验证码接口
              } else {
                this.shows = true;
                clearInterval(this.timers);
                this.timers = null;
              }
            }, 1000);
          }
        } else {
          this.$message.warning("请输入正确的手机号");
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-step__head.is-success {
  color: #f0406f !important;
  border-color: #f0406f !important;
}

.phoneBox {
  // width: 36rem;
  padding: 0 0 30rem;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  justify-content: center;

  .allTitle {
    color: #494949;
    font-size: 1.13rem;
    padding: 2.88rem 2.88rem 0;
  }

  .steps {
    margin: 6.3rem 0;
  }

  .tips {
    text-align: center;
    font-size: 1.13rem;
    color: #666;
  }

  .codeInput {
    width: 27.75rem;
    height: 2.8rem;
    font-size: 0.88rem;
    display: flex;
    flex-direction: row;
    margin: 2rem auto 3.81rem;

    input {
      width: 19.75rem;
      outline: none;
      height: 2.8rem;
      background: rgba(255, 255, 255, 1);
      border: 0.06px solid rgba(209, 209, 209, 1);
      text-indent: 0.94rem;
    }

    div {
      width: 8rem;
      cursor: pointer;
      height: 2.8rem;
      user-select: none;
      color: #fff;
      text-align: center;
      line-height: 2.8rem;
      background: rgba(180, 160, 120, 1);
    }
  }

  .codeInputs {
    width: 27.75rem;
    height: 2.8rem;
    font-size: 0.88rem;
    display: flex;
    flex-direction: row;
    margin: 0.5rem auto 0.5rem;

    input {
      width: 27.75rem;
      outline: none;
      height: 2.8rem;
      background: rgba(255, 255, 255, 1);
      border: 0.06px solid rgba(209, 209, 209, 1);
      text-indent: 0.94rem;
    }
  }

  .nextBtn {
    width: 24.44rem;
    height: 2.81rem;
    margin: 0 auto;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    font-size: 1.13rem;
    text-align: center;
    line-height: 2.81rem;
    cursor: pointer;
    user-select: none;
  }
}
</style>
